define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {

    var Controller = {
        index: function () {


            var myChart1 = Echarts.init(document.getElementById('echart'));
            const labelOption = {
                show: true,
                position: 'insideBottom',
                distance: 10,
                align: 'left',
                verticalAlign: 'middle',
                rotate: 90,
                formatter: '{c}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            var option1 = {
                color: [
                    "#3fb1e3",
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [__('Register user')]
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {

                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: Config.column
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: __('Register user'),
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#18d1b1'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: __('Register user'),
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        // data: [25,35,48,36,57,69,25,35,48,36,57,59]
                        data: Config.userData
                    }
                ]
            };

            myChart1.setOption(option1);


            var myChart2 = Echarts.init(document.getElementById('echartShu'));
            var option2 = {
                color: [
                    "#3fb1e3",
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [__('Recharge orders')]
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {

                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: Config.column
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: __('Recharge orders'),
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3fb1e3"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: __('Recharge orders'),
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: Config.orderData
                    }
                ]
            };

            myChart2.setOption(option2);

            $(window).resize(function () {
                myChart1.resize();
                myChart2.resize();
            });

            $(document).on("click", ".btn-refresh", function () {
                setTimeout(function () {
                    myChart1.resize();
                    myChart2.resize();
                }, 0);
            });

        }
    };

    return Controller;
});
